<template>
  <ul class="list">
    <li v-for="m in hotList" :key="m.id">
        <div class="image">
          <img :src="m.img | wh" alt="">
        </div>
        <div class="content">
          <p>{{m.nm}} <span :class="['version', m.ver]"></span></p>
          <p>{{m.cat}}</p>
          <p>{{m.desc}}</p>
          <p>{{m.showInfo}}</p>
        </div>
        <MovieButton :movie="m"></MovieButton>
    </li>
  </ul>
</template>

<script>
import MovieButton from '@c/MovieButton'
export default {
  props: {
    hotList: {
      type: Array
    }
  },
  components: {
    MovieButton
  },
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/border.styl'
@import '~@a/stylus/ellipsis.styl'
.list
  li
    padding .12rem
    padding-left 0
    margin-left .12rem
    display flex
    border_1px(0 0 1px 0, #ccc)
    .image
      width .76rem
      img
        width .64rem
        height .90rem
    .content
      flex 1
      color #666
      p:first-child
        font-size .16rem
        color #000
        .version {
          background-size: contain;
          background-repeat: no-repeat;
          height: 14px;
          width: 17px;
          display: inline-block;
          margin-top: 5px;
          -webkit-box-flex: 0;
          flex: 0 0 auto;
          margin-right: 3px
        }

        .version.v2d.imax {
          width: 43px;
          background-image: url('')
        }

        .version.v2d.imax+div.title {
          max-width: calc(100% - 43px)
        }

        .version.v3d {
          background-image: url('')
        }

        .version.v3d.imax {
          width: 43px;
          background-image: url('')
        }

        .version.v3d.imax+div.title {
          max-width: calc(100% - 43px)
        }

      p:nth-child(2)
        margin-top .06rem
      p:nth-child(3)
        ellipsis(100%, 1)
        overflow hidden
      p:last-child
        color #999

  li:last-child
    border_1px(0, #ccc) 
</style>